<template>
  <div class="mb-4">
    <div class="flex items-center justify-between mb-1">
      <div class="flex items-center">
        <img :src="iconUrl" alt="Icon" class="w-6 h-6 mr-2" />
        <span class="text-base font-medium text-white">{{ skillName }}</span>
      </div>
      <span class="text-sm font-medium text-gray-700">{{ percentage }}%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-6">
      <div
        class="bg-gold h-6 rounded-full text-xs font-medium text-blue-100 text-center p-0.5 leading-none"
        :style="{ width: `${percentage}%` }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SkillProgress',
  props: {
    skillName: {
      type: String,
      required: true,
    },
    iconUrl: {
      type: String,
      required: true,
    },
    percentage: {
      type: Number,
      required: true,
      validator: value => value >= 0 && value <= 100,
    },
  },
}
</script>

<style scoped>
.bg-gold {
  background-color: #FFD700; /* Gold color */
}
</style>
